<!-- 推荐系统组件 - 用于根据用户输入的高考分数推荐合适的大学 -->
<template>
  <!-- 用户输入表单区域 -->
  <el-form label-width="80px" label-position="left">
    <div class="rank-box">
      <!-- 科类选择（示例用途） -->
      <el-form-item label="科类">
        <!-- 仅作展示，无实际作用 -->
        <el-radio-group v-model="subject">
          <el-radio label="理科" value="理科">理科</el-radio>
          <el-radio label="文科" value="文科">文科</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 分数输入框 -->
      <el-form-item label="分数" style="margin-left: 8vw">
        <el-input
            v-model="userScore"
            placeholder="您的分数"
            type="number"
            @keyup.enter="getRank()"
        ></el-input>
      </el-form-item>
      <!-- 排名显示框（只读） -->
      <el-form-item label="排名" style="margin-left: 2vw">
        <el-input v-model="userRank" placeholder="您的排名" disabled></el-input>
      </el-form-item>
      <!-- 推荐按钮 -->
      <el-button
          type="primary"
          style="margin-left: 4vw"
          @click="getRecommendList"
      >
        <el-icon>
          <Search />
        </el-icon>
        推荐
      </el-button>
    </div>
    <!-- 风险等级选择 -->
    <el-form-item label="风险">
      <el-radio-group v-model="risk">
        <el-radio-button label="全部" value="全部" />
        <el-radio-button label="可冲击" value="可冲击" />
        <el-radio-button label="较稳妥" value="较稳妥" />
        <el-radio-button label="可保底" value="可保底" />
      </el-radio-group>
    </el-form-item>
  </el-form>

  <!-- 学校列表展示区域 -->
  <div class="school-list">
    <ul>
      <li v-for="(school, index) in schoolList" :key="school.schoolId">
        <el-card
            class="schoolCard"
            shadow="hover"
            @click="goToDetail(school.schoolId)"
        >
          <div class="school-info">
            <div class="school-image">
              <el-image
                  :src="
                  'https://static-data.gaokao.cn/upload/logo/' +
                  school.schoolId +
                  '.jpg'
                "
                  style="width: 100px; height: 100px"
                  alt="school-logo"
              />
            </div>
            <div class="school-detail">
              <p>{{ school.schoolName }}</p>
              <span>&nbsp;&nbsp;最低位次：{{ school.rank2022 }}</span>
              <span>&nbsp;&nbsp;预测投档线：{{ averageScores[index] }}</span>
              <span
              >&nbsp;&nbsp;录取概率：&nbsp;&nbsp;<el-icon
                  size="20px"
                  :color="
                    upLineRateList[index] < 60
                      ? '#FF0000'
                      : upLineRateList[index] >= 80
                      ? '#21c33c'
                      : '#409eff'
                  "
              >
                  {{
                  upLineRateList[index] == 0 ? "<25" : upLineRateList[index]
                }}%</el-icon
              ></span
              >
            </div>
          </div>
        </el-card>
      </li>
    </ul>
  </div>
  <!-- 分页器 -->
  <el-pagination
      class="pagination"
      background
      v-model:current-page="pageNum"
      :total="total"
      layout="prev, pager, next, jumper"
      @current-change="handleCurrentChange"
  />
</template>

<script setup>
// 导入所需的Vue组件和工具
import { onMounted, ref, watch } from "vue";
import { ElLoading, ElMessage } from "element-plus";
import request from "../utils/request.js";

// 响应式状态定义
const subject = ref("理科");    // 科类选择
const userScore = ref(600);     // 用户输入分数
const userRank = ref("");       // 查询得到的排名
const risk = ref("全部");       // 风险等级
const schoolList = ref([]);     // 学校列表
const averageScores = ref([]); // 预测投档线
const upLineRateList = ref([]); // 录取概率列表
const pageNum = ref(1);         // 当前页码
const total = ref(0);           // 总条数

// 监听风险等级变化，重置页码并重新获取推荐列表
watch(risk, () => {
  pageNum.value = 1;
  getRecommendList();
});

// 获取学校推荐列表
const getRecommendList = async () => {
  const loadingInstance = ElLoading.service({
    fullscreen: true,
    text: "正在加载中...",
  });
  try {
    const response = await request.get(
        `/scoreRank/getReco?page=${pageNum.value}&score=${userScore.value} &risk=${risk.value}`
    );
    if (response.code == 200) {
      schoolList.value = response.data.schools;
      averageScores.value = response.data.averageScores;
      upLineRateList.value = response.data.upLineRateList;
      total.value = response.data.total;
    } else {
      ElMessage.error(response.message);
    }
  } catch (error) {
    ElMessage.error(error);
  }
  loadingInstance.close();
};

// 获取分数对应排名
const getRank = async () => {
  // 输入验证
  if (userScore.value == "") {
    ElMessage.error("请输入分数！");
    return;
  }
  // 分数范围验证
  if (userScore.value < 0 || userScore.value > 750) {
    ElMessage.error("请输入正确的分数！");
    return;
  }
  if (userScore.value < 100 || userScore.value > 695) {
    ElMessage.error("无数据");
    return;
  }
  try {
    const response = await request.get(
        `/scoreRank/getRank?score=${userScore.value}`
    );
    if (response.code === 200) {
      userRank.value = response.data.scoreRank.rankRange;
      ElMessage.success("查询排名成功！");
    } else {
      ElMessage.error(response.message);
    }
  } catch (error) {
    ElMessage.error(error);
  }
};

// 处理页码变化
const handleCurrentChange = (newPage) => {
  pageNum.value = newPage;
  getRecommendList();
};

// 组件挂载时初始化数据
onMounted(getRank(), getRecommendList());
</script>

<style scoped>
/* 布局样式 */
.rank-box {
  display: flex;
}

/* 列表样式设置 */
ul {
  justify-content: center;
  padding-inline-start: 0;
}

li {
  list-style-type: none;
}

/* 学校卡片样式 */
.schoolCard {
  margin: 20px auto;
  height: 140px;
  border-radius: 10px;
}

/* 卡片悬停效果 */
.schoolCard:hover {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
  background-color: rgb(250, 250, 250);
  cursor: pointer;
}

/* 学校信息布局 */
.school-info {
  display: flex;
}

.school-detail {
  text-align: center;
  width: 100%;
}

/* 文字样式 */
p {
  font-size: large;
}

/* 分页器居中 */
.pagination {
  justify-content: center;
}

/* 按钮容器样式 */
.button-container {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
</style>
